<template>
    <div id="panel">
        <v-container>
            
            <v-tabs
                v-model="tab"
                align-with-title
            >
                <v-tabs-slider color="yellow"></v-tabs-slider>
                <v-tab
                    v-for="i in choices"
                    :key="i"
                >
                    {{ i }}
                </v-tab>
            </v-tabs>

            <v-tabs-items v-model="tab">
            <v-tab-item
                v-for="i in choices"
                :key="i"
            >
                <v-col>
                    <v-combobox v-if= "i == 'axis'"
                        v-model= "formOptions.axis.x.default"
                        :items= "formOptions.axis.x.values"
                        :label= "formOptions.axis.x.name"
                    ></v-combobox>
                    <v-combobox v-if= "i == 'axis'"
                        v-model= formOptions.axis.y.default
                        :items= formOptions.axis.y.values
                        :label= formOptions.axis.y.name
                    ></v-combobox>
                    <v-combobox v-if= "i == 'axis'"
                        v-model= "formOptions.axis.rx.default"
                        :items= formOptions.axis.rx.values
                        :label= formOptions.axis.rx.name
                    ></v-combobox>
                    <v-combobox v-if= "i == 'axis'"
                        v-model= formOptions.axis.ry.default
                        :items= formOptions.axis.ry.values
                        :label= formOptions.axis.ry.name
                    ></v-combobox>
                </v-col>

                <v-card 
                    class="pa-2"
                    width = "300"
                    elevation = 0
                >
                    <v-col
                        offset-md="1"
                    >
                        <v-row>
                            <div style = "font-size : 20px;" v-if= "i == 'color'">{{ "中国" }}</div>
                            <v-spacer></v-spacer>
                            <el-color-picker v-if= "i == 'color'"
                                v-model= formOptions.color.中国.default
                            ></el-color-picker>
                        </v-row>
                        <v-row>
                            <div style = "font-size : 20px;" v-if= "i == 'color'">{{ "美国" }}</div>
                            <v-spacer></v-spacer>
                            <el-color-picker v-if= "i == 'color'"
                                v-model= formOptions.color.美国.default
                            ></el-color-picker>
                        </v-row>
                        <v-row>
                            <div style = "font-size : 20px;" v-if= "i == 'color'">{{ "法国" }}</div>
                            <v-spacer></v-spacer>
                            <el-color-picker v-if= "i == 'color'"
                                v-model= formOptions.color.法国.default
                            ></el-color-picker>
                        </v-row>
                        <v-row>
                            <div style = "font-size : 20px;" v-if= "i == 'color'">{{ "俄罗斯" }}</div>
                            <v-spacer></v-spacer>
                            <el-color-picker v-if= "i == 'color'"
                                v-model= formOptions.color.俄罗斯.default
                            ></el-color-picker>
                        </v-row>
                        <v-row>
                            <div style = "font-size : 20px;" v-if= "i == 'color'">{{ "印度" }}</div>
                            <v-spacer></v-spacer>
                            <el-color-picker v-if= "i == 'color'"
                                v-model= formOptions.color.印度.default
                            ></el-color-picker>
                        </v-row>
                        <v-row>
                            <div style = "font-size : 20px;" v-if= "i == 'color'">{{ "马达加斯加" }}</div>
                            <v-spacer></v-spacer>
                            <el-color-picker v-if= "i == 'color'"
                                v-model= formOptions.color.马达加斯加.default
                            ></el-color-picker>
                        </v-row>
                    </v-col>
                </v-card>

            <v-col
                offset-md="1"
            >
                <v-switch
                    v-model="formOptions.other.tooltip.default"
                    :label="`显示提示信息: ${formOptions.other.tooltip.default.toString()}`"
                    v-if= "i == 'other'"
                ></v-switch>
                <v-switch
                    v-model="formOptions.other.tag.default"
                    :label="`显示标签: ${formOptions.other.tag.default.toString()}`"
                    v-if= "i == 'other'"
                ></v-switch>
                <v-combobox v-if= "i == 'other'"
                    v-model= formOptions.other.times.default
                    :items= formOptions.other.times.values
                    :label= formOptions.other.times.name
                ></v-combobox>
                <v-combobox v-if= "i == 'other'"
                    v-model= formOptions.other.countrys.default
                    :items= formOptions.other.countrys.values
                    :label= formOptions.other.countrys.name
                ></v-combobox>
                <v-combobox v-if= "i == 'other'"
                    v-model= formOptions.other.axis.default
                    :items= formOptions.other.axis.values
                    :label= formOptions.other.axis.name
                ></v-combobox>
            </v-col>
            </v-tab-item>
            </v-tabs-items>

        </v-container>
    </div>
</template>
<script>

export default {
    name:'panel',
    props:{
        colormap:Object,
        formOptions: Object,
    },
    data(){
        return {
            tab: null,
            choices: [
            'axis', 'color', 'other',
            ],
        }
    },
}
</script>